import React from 'react';
import { Link } from 'react-router';

import * as acts from '../../store/actions';
import {changePage,fetchPatient,removePatient} from '../../store/actions';
import {connect} from "react-redux"
import {Card, Col, Row,Button,Spin,Modal,message} from 'antd'
require('../../../css/label-list.css');
/*
* acts.changePage，跳转详情页
* acts.fetchPatients，获取患者列表
* acts.fetchPatient by id，根据患者id获取患者
* */

class _PatientDetail extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            patient: {},
            isFetch: true,
            modal:{
                title:'',
                text:'',
                visible:false
            }
        };
        this.changePage = this.changePage.bind(this);
        this.goToEdit = this.goToEdit.bind(this);
        this.delPatient = this.delPatient.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.handleOk = this.handleOk.bind(this);
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    changePage(){
        this.props.dispatch(changePage('patient-detail'));
    }
    componentWillMount(){
        const pid = this.props.params.id,
            _user = this.props.user,
            _this = this;
        try{
            this.props.dispatch(fetchPatient(pid,function(res){
                _this.setState({
                    patient:res.content,
                    isFetch: false
                })
            },function(){
                _this.setState({
                    isFetch: false
                })
            }));
        }catch (e){}
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    goToEdit(){
        this.context.router.push(`/patient-edit/${this.props.params.id}`)
    }
    handleOk(){
        const _this = this,
            pid = _this.state.patient.id;
        _this.setState({
            modal: {
                confirmLoading: true,
                visible:true,
                text:'您确认要删除这个亲友吗？',
                title:'删除亲友'
            }
        },function(){
            _this.props.dispatch(removePatient(pid,function(){
                message.success('删除亲友成功',1,function(){
                    _this.setState({
                        modal: {
                            confirmLoading: false,
                            visible:false,
                            text:'',
                            title:''
                        }
                    },function(){
                        _this.context.router.push('/patients')
                    })
                })
            },function(e){
                message.error('删除亲友失败',2,function(){
                    _this.setState({
                        modal: {
                            confirmLoading: false,
                            visible:false,
                            text:'',
                            title:''
                        }
                    })
                })

            }))
        });
    }
    handleCancel(){
        this.setState({
            modal:{
                visible:false
            }
        })
    }
    delPatient(){
        this.setState({
            modal:{
                visible:true,
                text:'您确认要删除这个亲友吗？',
                title:'删除亲友'
            }
        });
    }
    componentWillReceiveProps(nextProp){}
    render(){
        if(this.state.isFetch){
            return <Spin />
        }else{
            return(
                <div style={{ background: '#ECECEC', padding: '10px' }}>
                    {`${this.state.patient.status}`==1?(
                        <Row type="flex" justify="space-around" align="top">
                            <Col span="11">
                                <Card title={`关于亲友`} bordered={false}>
                                    <ul className="label-list">
                                        <li><label>姓名</label>{`${this.state.patient.name}`} </li>
                                        <li><label>性别</label>{`${this.state.patient.gender.toUpperCase()}`==`M`?`男`:`女`} </li>
                                        <li><label>生日</label>{`${this.state.patient.birthday}`} </li>
                                        <li><label>关系</label>{`${this.state.patient.relationship}`} </li>
                                    </ul>
                                    <Button type="primary" icon="edit" size="large" onClick={this.goToEdit}>编辑</Button>
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <Button type="ghost" icon="delete" size="small" onClick={this.delPatient}>删除</Button>
                                </Card>
                            </Col>
                            <Col span="11">
                                <Card title={`${this.state.patient.name}的影像`} bordered={false}>

                                </Card>
                            </Col>
                        </Row>
                    ):`亲友 ${this.state.patient.name} 已被删除`}


                    <Modal title={this.state.modal.title}
                           visible={this.state.modal.visible}
                           onOk={this.handleOk}
                           confirmLoading={this.state.modal.confirmLoading}
                           onCancel={this.handleCancel}
                    >
                        <p>{this.state.modal.text}</p>
                    </Modal>
                </div>
            )
        }
    }
}

/*
* 当前是加载组件时请求数据，并没有使用store中的数据，未来写完本地存储的系列功能后，并保证数据与服务端同步的情况下，可以取消这个请求
* 目前并不取消关联数据属性
* */

const PatientDetail = connect((state)=>{
    const {user} = state.rootReducer,
        {items} = state.rootReducer.patients;
    return {user,items}
})(_PatientDetail);
export default PatientDetail;